<template>
  <section class="synopsis">
    <div class="title">
      <span>{{ title }}</span>
      <span class="video" v-if="videoUrl" @click="videoShow = true"
        >视频介绍 <span class="icon-wrapper"><span class="icon"></span></span>
      </span>
    </div>
    <div class="clamp" @click="onContentClick">
      <template v-if="isFold">
        <span class="clamp-fold">{{ content }}</span
        ><span class="btn open" v-if="content">展开</span>
      </template>
      <template v-else>
        <span class="clamp-unfold">{{ content }}</span
        ><span class="btn" v-if="content">收起</span>
      </template>
    </div>
    <atom-overlay :show="videoShow">
      <div v-if="videoShow" class="video-overlay">
        <div class="close-icon" @click="videoShow = false">
          <span>关闭</span> <atom-icon name="close" />
        </div>
        <IntroVideo :videoUrl="videoUrl" />
      </div>
    </atom-overlay>
  </section>
</template>

<script>
import IntroVideo from '@/components/common/IntroVideo.vue';
import '@atom/atom-icons/icons/close';
import { localStorageKey } from '@/config/pool.js';
import tools from '@/lib/tools.js';

const synopsisStorage = new tools.LocalStorageManager(localStorageKey, 'synopsis-click');

export default {
  components: {
    IntroVideo,
  },
  props: {
    id: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
    content: {
      type: String,
      default: '',
    },
    videoUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      // 是否折叠
      isFold: false,
      // 是否展示简介视频
      videoShow: false,
    };
  },
  created() {
    const hasStorage = synopsisStorage.getItem(this.id);
    if (hasStorage) {
      this.isFold = true;
    }
  },
  methods: {
    onContentClick() {
      this.isFold = !this.isFold;
      synopsisStorage.setItem(this.id, this.isFold);
    },
  },
};
</script>

<style lang="less" scoped>
section {
  background: var(--bg-color-2);
  border-radius: 6px;
  padding: 12px 10px;
  margin-bottom: 8px;
  .title {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    color: var(--text-1);
    display: flex;
    .icon-wrapper {
      display: inline-block;
      width: 0.4rem;
      height: 0.4rem;
      background: var(--bg-color-7);
      border-radius: 0.2rem;
      position: relative;
      top: 0.02rem;
      .icon {
        display: inline-block;
        width: 0px;
        height: 0px;
        border-width: 0.1rem;
        border-style: solid;
        border-color: transparent transparent transparent var(--bg-color-8);
        position: relative;
        left: 0.16rem;
      }
    }
  }
  .video {
    display: inline-block;
    padding: 0.02rem 0.12rem;
    background: var(--bg-color-6);
    border-radius: 0.2rem;
    cursor: pointer;
    color: var(--text-2);
    font-size: 0.24rem;
    position: relative;
    top: -0.04rem;
    margin-left: 0.08rem;
  }
}

.synopsis {
  .title {
    padding-bottom: 8px;
  }
  .clamp {
    font-size: 14px;
    color: var(--text-2);
    letter-spacing: 0;
    line-height: 22px;
    text-align: justify;
    white-space: pre-wrap;
    position: relative;
  }
  .clamp-fold {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    width: calc(100% - 28px);
  }
}

.btn {
  margin-left: 10px;
  color: #4167d9;
  &.open {
    position: absolute;
    right: 0;
    top: 0;
  }
}

.atom-overlay {
  z-index: 99 !important;
  background: #000000 !important;
}

.video-overlay {
  width: 100vw;
  height: 100vh;
  background: #000000;
  .close-icon {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 999;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.28rem;
    height: 0.32rem;
    display: flex;
    align-items: center;
    .atom-icon {
      color: rgba(255, 255, 255, 0.84);
      font-size: 0.32rem;
      position: relative;
      top: 0.01rem;
    }
  }
}
</style>
